<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台消息测试</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .message {
            padding: 12px 16px;
            margin: 10px 0;
            border-radius: 6px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            border-left: 4px solid #28a745;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            border-left: 4px solid #dc3545;
        }
        .warning {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
            border-left: 4px solid #ffc107;
        }
        .info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
            border-left: 4px solid #17a2b8;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(-10px);
            }
        }
        
        .message.fade-out {
            animation: fadeOut 0.3s ease-in forwards;
        }
        
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        
        .demo-area {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 5px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 管理后台消息系统测试</h1>
        
        <div class="test-section">
            <h3>📋 问题修复说明</h3>
            <p><strong>问题：</strong>点击"保存题库"没有成功提示</p>
            <p><strong>原因：</strong>JavaScript代码尝试向 <code>questionBankMessage</code> 元素显示消息，但HTML中缺少这个元素</p>
            <p><strong>解决：</strong></p>
            <ul>
                <li>✅ 添加了缺失的 <code>&lt;div id="questionBankMessage"&gt;&lt;/div&gt;</code> 元素</li>
                <li>✅ 优化了消息显示函数，添加了动画效果</li>
                <li>✅ 统一了所有消息显示的样式和行为</li>
                <li>✅ 添加了自动消失功能（5秒后自动清除）</li>
            </ul>
        </div>

        <div class="test-section">
            <h3>🎨 消息样式演示</h3>
            <div class="demo-area">
                <button onclick="showTestMessage('success')">成功消息</button>
                <button onclick="showTestMessage('error')">错误消息</button>
                <button onclick="showTestMessage('warning')">警告消息</button>
                <button onclick="showTestMessage('info')">信息消息</button>
                <button onclick="clearMessages()">清除消息</button>
            </div>
            <div id="testMessages"></div>
        </div>

        <div class="test-section">
            <h3>🔧 题库操作测试</h3>
            <p>现在题库编辑功能应该会显示以下消息：</p>
            <ul>
                <li><strong>保存成功：</strong>✅ 题库保存成功！</li>
                <li><strong>保存失败：</strong>❌ 保存失败: [错误信息]</li>
                <li><strong>网络错误：</strong>❌ 保存失败: [网络错误]</li>
            </ul>
            
            <div class="demo-area">
                <button onclick="simulateQuestionBankSave('success')">模拟保存成功</button>
                <button onclick="simulateQuestionBankSave('error')">模拟保存失败</button>
                <button onclick="simulateQuestionBankSave('network')">模拟网络错误</button>
            </div>
            <div id="questionBankMessage"></div>
        </div>

        <div class="test-section">
            <h3>🚀 使用说明</h3>
            <ol>
                <li>现在访问管理后台：<a href="http://localhost:8000/admin" target="_blank">http://localhost:8000/admin</a></li>
                <li>编辑题库名称</li>
                <li>点击"保存题库"按钮</li>
                <li>应该会看到绿色的成功消息：✅ 题库保存成功！</li>
                <li>消息会在5秒后自动消失</li>
            </ol>
            
            <h4>💡 新增功能：</h4>
            <ul>
                <li>🎨 美观的消息样式（带图标和颜色边框）</li>
                <li>⚡ 滑入动画效果</li>
                <li>🕐 自动消失（5秒后淡出）</li>
                <li>📱 响应式设计</li>
                <li>🔄 统一的消息管理系统</li>
            </ul>
        </div>
    </div>

    <script>
        // 通用消息显示函数（与后台相同）
        function showMessage(elementId, message, type = 'info', duration = 5000) {
            const element = document.getElementById(elementId);
            if (!element) return;
            
            const messageClass = type === 'success' ? 'message success' : 
                               type === 'error' ? 'message error' : 
                               type === 'warning' ? 'message warning' : 'message info';
            
            // 清除之前的消息
            element.innerHTML = '';
            
            // 创建新消息元素
            const messageDiv = document.createElement('div');
            messageDiv.className = messageClass;
            messageDiv.style.animation = 'slideIn 0.3s ease-out';
            messageDiv.innerHTML = message;
            element.appendChild(messageDiv);
            
            // 自动清除消息
            if (duration > 0) {
                setTimeout(() => {
                    if (element.contains(messageDiv)) {
                        messageDiv.classList.add('fade-out');
                        setTimeout(() => {
                            if (element.contains(messageDiv)) {
                                element.removeChild(messageDiv);
                            }
                        }, 300); // 等待淡出动画完成
                    }
                }, duration);
            }
        }

        // 测试消息显示
        function showTestMessage(type) {
            const messages = {
                success: '✅ 操作成功完成！',
                error: '❌ 操作失败，请重试',
                warning: '⚠️ 请注意相关风险',
                info: 'ℹ️ 这是一条信息提示'
            };
            showMessage('testMessages', messages[type] || messages.info, type, 3000);
        }

        // 模拟题库保存
        function simulateQuestionBankSave(result) {
            switch(result) {
                case 'success':
                    showMessage('questionBankMessage', '✅ 题库保存成功！', 'success');
                    break;
                case 'error':
                    showMessage('questionBankMessage', '❌ 保存失败: 题库名称不能为空', 'error');
                    break;
                case 'network':
                    showMessage('questionBankMessage', '❌ 保存失败: 网络连接错误', 'error');
                    break;
            }
        }

        // 清除所有消息
        function clearMessages() {
            document.getElementById('testMessages').innerHTML = '';
            document.getElementById('questionBankMessage').innerHTML = '';
        }
    </script>
</body>
</html>
